<template>
    <div class="list-section">
        <div class="title">
            <div class="left">
                投标文件检查历史记录

                <btn-reload 
                    class="reload"
                    @click="queryData()"
                ></btn-reload>
            </div>

            <div class="right" v-if="tableData.length">
                <template v-if="!batchController">
                    <el-button type="text" @click="batchToggle(true)">管理</el-button>
                </template>

                <template v-if="batchController">
                    <el-button type="text" @click="batchDelHandler">批量删除</el-button>
                    <el-button type="text" @click="batchToggle(false)">取消</el-button>
                </template>
            </div>
        </div>

        <div class="list">
            <list-item
                v-for="item in tableData"
                :key="item.rowguid"
                :data="item"
                :batch="batchController"
                :batch-check.sync="checkList"
                @del="delHandler(item)"
                @update="queryData()"
            ></list-item>

            <div class="empty" v-if="!tableData.length">
                <img src="/images/application/file-check/kong.png" alt="">
                <p>暂无标书检查记录</p>
            </div>
        </div>
    </div>
</template>

<script>
import BtnReload from '@components/sys/btn-reload';
import EmptyList from '@components/sys/empty-list';

import ListItem from './components/list-item';

export default {
    components: {
        BtnReload,
        EmptyList,
        ListItem,
    },
    data() {
        return {
            tableData: [],

            checkList: [],

            batchController: false,
        };
    },
    methods: {
        // 批量控制开关
        batchToggle(state) {
            this.batchController = state;
        },
        // 删除
        delHandler(row) {
            showConfirm('确认删除该提交信息内容，删除后不可恢复，请确认！', 'warning', () => {
                var rowguid = '';

                if (row) {
                    // 单独删除
                    rowguid = row.rowguid;
                } else {
                    // 批量删除

                    rowguid = this.checkList.map(item => item.rowguid).join(',');
                }

                this.$post(`${this.$store.state.api.webUrl}/tbfile/check/del.json`, {
                    rowguid,
                }, data => {
                    this.queryData();
                });
            });
        },
        // 批量删除
        batchDelHandler() {
            if (!this.checkList.length) {
                showMsgBox('请选择要批量删除的项');
                return;
            }

            this.delHandler();
        },
        // 请求列表
        queryData() {
            this.checkList = [];

            this.$get(`${this.$store.state.api.webUrl}/tbfile/check/list.json`, {
                isall: 1,
            }, data => {
                this.tableData = data || [];
            });
        },
    },
    mounted() {
        this.queryData();
    },
};
</script>

<style scoped lang="scss">
    @import '@css/var.scss';

    .list-section {
        & > .title {
            overflow: hidden;
            margin-top: 30px;
            height: 30px;

            .left {
                float: left;
                color: #333333;
                font-size: 16px;

                .reload{
                    margin-left: 1em;
                    font-weight: bold;
                }
            }

            .right {
                float: right;
            }
        }

        .empty{
            text-align: center;
            font-size: 16px;
            color: #7e7d7d;
            padding: 100px 0;
            img{
                margin-bottom: 20px;
            }
        }
    }
</style>